<template>
	<view @click="closeEmoji">
		<!-- 消息列表 -->
		<scroll-view class="msg-container" scroll-y :scroll-into-view="toView" :scroll-with-animation="true">
			<block v-for="(item,index) in msgList" :key="item._id">
				<view :id="'msg-'+index" v-if="item.sender_id === userInfo.userid" class="message-self-item">
					<view class="time">{{formatTime(item.created_at)}}</view>
					<view class="content">
						<view class="self-item-info">
							<view class="top">{{item.nickname}}</view>
							<view :class="[item.media_type === 'text' ? 'bottom1':'bottom2']">
								<view v-if="item.media_type === 'text'"
									style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
									{{item.content}}
								</view>
								<image @click="priview(item.content)" style="width:400rpx;height:400rpx;"
									v-if="item.media_type === 'image'" :src="item.content" mode="" />
							</view>
						</view>
						<view class="self-item-avatar">
							<image :src="item.avatar" />
						</view>
					</view>
				</view>
				<view :id="'msg-'+index" wx:else class="message-other-item">

					<view class="time">{{formatTime(item.created_at)}}</view>
					<view class="content">
						<view class="other-item-avatar">
							<image :src="item.avatar" />
						</view>
						<view class="other-item-info">
							<view class="top">{{item.nickname}}</view>
							<view class="bottom">
								<text v-if="item.media_type === 'text'" class="text"
									style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">{{item.content}}</text>
								<image @click="priview(item.content)" style="width:400rpx;height:400rpx;"
									v-if="item.media_type === 'image'" :src="item.content" mode="" />
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<!-- 发消息列表 -->
		<view class="send-container">
			<view class="emoji-list" v-show="!hideEmoji">
				<view class="emoji-item" v-for="(item,index) in emojiList" :key="index"
					@click.stop="chooseEmoji(index)">{{ item }}
				</view>
			</view>
			<view class="header">
				<image src="@/static/images/chat/icon.png" mode="" @click.stop="toggleEmoji" />
				<image src="@/static/images/chat/photo.png" mode="" @click="upload" />
			</view>
			<textarea v-model="message" bindblur="handleBlur"></textarea>
			<van-button type="primary" class="footer-button" :disabled="message.length === 0"
				@click="send">发送</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.msg-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100vh - 320rpx);
		overflow-y: scroll;
		background-color: #f0f2f5;
	}

	.message-self-item {
		display: flex;
		padding: 20rpx 20rpx 40rpx 20rpx;
		flex-direction: column;
	}

	.time {
		text-align: center;
		font-size: 13px;
		color: #999;
	}

	.message-self-item .content {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
	}

	.self-item-avatar {
		width: 90rpx;
		height: 90rpx;
	}

	.self-item-avatar image {
		margin-top: 12rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.self-item-info {
		margin: 0 10px;
		flex: 1;
	}

	.self-item-info .top {
		text-align: right;
		font-size: 13px;
	}

	.self-item-info .bottom1 {
		position: relative;
		margin-top: 8rpx;
		margin-right: 10rpx;
		color: #fff;
		display: inline-block;
		padding: 12rpx 20rpx;
		border-radius: 10px;
		background-color: rgba(0, 155, 255, 1);
		font-size: 16px;
		float: right;
		max-width: 500rpx;
	}

	.self-item-info .bottom2 {
		position: relative;
		margin-top: 8rpx;
		margin-right: 10rpx;
		color: #fff;
		display: inline-block;
		padding: 12rpx 20rpx;
		border-radius: 10px;
		background-color: white;
		background-color: white;
		font-size: 16px;
		float: right;
		max-width: 500rpx;
	}

	.self-item-info .bottom1::after {
		content: '';
		display: inline-block;
		position: absolute;
		width: 0;
		height: 0;
		border: 8px solid;
		right: -4px;
		top: 4px;
		border-color: transparent transparent transparent rgba(0, 155, 255, 1);
		transform: translate(11px, 1px);
	}

	.self-item-info .bottom2::after {
		content: '';
		display: inline-block;
		position: absolute;
		width: 0;
		height: 0;
		border: 8px solid;
		right: -4px;
		top: 4px;
		border-color: transparent transparent transparent white;
		transform: translate(11px, 1px);
	}

	.message-other-item {
		display: flex;
		padding: 20rpx 20rpx 40rpx 20rpx;
		flex-direction: column;
	}

	.message-other-item .content {
		display: flex;
		margin-top: 20rpx;
	}

	.other-item-avatar {
		width: 90rpx;
		height: 90rpx;
	}

	.other-item-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.other-item-info {
		margin-left: 10rpx;
		flex: 1;
	}

	.other-item-info .top {
		font-size: 13px;
	}

	.other-item-info .bottom {
		position: relative;
		margin-top: 8rpx;
		margin-left: 10rpx;
		color: #353535;
		display: inline-block;
		padding: 12rpx 20rpx;
		border-radius: 10px;
		background-color: #fff;
		font-size: 16px;
	}

	.other-item-info .bottom::before {
		left: -4px;
		content: '';
		display: inline-block;
		position: absolute;
		width: 0;
		height: 0;
		border: 8px solid;
		border-color: transparent #fff transparent transparent;
		transform: translate(-11px, 1px);
	}

	.send-container {
		width: 100%;
		height: 300rpx;
		border-top: 1px solid #dbdbdb;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.emoji-list {
		position: absolute;
		display: flex;
		flex-wrap: wrap;
		width: 660rpx;
		height: 380rpx;
		background-color: #fff;
		top: -380rpx;
		overflow-y: auto;
	}

	.emoji-item {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.header image {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
	}

	textarea {
		width: 100%;
		flex: 1;
		padding: 10rpx;
	}

	.footer-button {
		position: absolute;
		height: 100rpx;
		right: 10rpx;
		bottom: 0px;
		z-index: 10;
	}
</style>